<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>十月，写给大地与晨光的信</title>
    <script src="../css/tailwind3.4.17.css"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        autumn: {
                            100: '#FFF9F2',
                            200: '#FFEBD8',
                            300: '#FFC898',
                            800: '#8B5A2B'
                        },
                        star: '#FFD700'
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:bg-autumn-300 hover:scale-105;
            }
        }
    </style>
</head>
<body class="bg-autumn-100 font-song text-gray-800>
    <!-- 顶部装饰条 -->
    <div class="w-full h-1.5 bg-gradient-to-r from-autumn-300 via-star to-autumn-300"></div>

    <!-- 主容器 -->
    <div class="container mx-auto px-4 md:px-8 py-12 max-w-4xl" contenteditable="true">
        <!-- 标题区 -->
        <header class="mb-10 text-center">
            <h1 class="text-[clamp(1.8rem,4vw,3rem)] font-bold text-autumn-800 mb-3 text-shadow">十月，写给大地与晨光的信</h1>
            <p class="text-gray-600 italic text-[clamp(0.9rem,1.5vw,1.1rem)]">—— 记祖国的第七十六个生辰</p>
            <div class="w-24 h-0.5 bg-autumn-300 mx-auto mt-5 rounded-full"></div>
        </header>

        <!-- 正文区：小说式短段落 -->
        <main class="prose prose-lg md:prose-xl mx-auto text-gray-700 leading-relaxed space-y-4">
            <p>风是十月的先行客。</p>
            
            <p>它漫过塞北的胡杨林，把金黄的碎光撒在沙丘上；掠过江南的稻田，让稻穗垂着饱满的阳光。</p>
            
            <p>当这阵风掠过肩头时，我忽然懂了——又一个与祖国并肩的秋天，来了。</p>
            
            <p>人们总说国庆是红色的。</p>
            
            <p>是广场上舒展的国旗，是孩子脸颊的贴纸，是老党员胸前亮闪闪的徽章。</p>
            
            <p>可若你静下心看，这红色里藏着万千色彩。</p>
            
            <p>是敦煌壁画的赭石色，沉淀着千年文明；是港珠澳大桥的银灰色，架起山海相连的路。</p>
            
            <p>还有乡村屋檐下的辣椒红，一串串挂着，满是烟火气的日子。</p>
            
            <div class="my-8 p-5 bg-autumn-200/40 rounded-lg border-l-3 border-autumn-300">
                <p class="italic text-center text-gray-600">“家国从不是遥远的词汇，是有人守着边疆的星，有人护着巷尾的灯。”</p>
            </div>
            
            <p>我们总在宏大叙事里寻找祖国，却忘了它藏在日常的细节里。</p>
            
            <p>早高峰地铁上，年轻人戴着耳机背单词，笔尖在笔记本上不停划动。</p>
            
            <p>菜市场摊主称完菜，总会多塞一根小葱，说“回家炒着香”，小葱沾着泥土的温气。</p>
            
            <p>边疆的雪地里，战士蹲下身，把界碑上“中国”二字擦得发亮，睫毛上结着白霜。</p>
            
            <p>留学生在异国街头听见乡音，脚步会突然加快，像找到了久违的光。</p>
            
            <p>这些细碎的瞬间，都是祖国的心跳。</p>
            
            <p>七十六个春秋不算长，在文明长河里只是一朵浪花。</p>
            
            <p>可这七十六年又足够厚重——让荒原长出高楼，让土路变成坦途。</p>
            
            <p>让“中国制造”变成“中国创造”，让爷爷辈“能吃饱就好”的心愿，成了我们“能追梦想、能看世界”的日常。</p>
            
            <p>这个十月，我没奔赴远方。</p>
            
            <p>去楼下公园转了转，孩子们追着风筝跑，父母的笑声落在风里，软软的。</p>
            
            <p>回家泡了壶茶，翻出老相册。十年前的街道还带着旧模样，如今早已换了新颜。</p>
            
            <p>风再吹过时，我忽然明白：我们庆祝的不只是节日。</p>
            
            <p>是每一个认真生活的人，每一段向前走的时光，每一寸满是希望的土地。</p>
            
            <p class="text-right font-semibold mt-6 text-autumn-800">愿山河常盛，愿你我皆安。</p>
        </main>

        <!-- 底部落款 -->
        <footer class="mt-12 text-center text-gray-500 text-xm">
            <p>2025年10月1日 于晨光里</p>
            <div class="flex justify-center gap-2 mt-3">
                <span class="w-2 h-2 rounded-full bg-star"></span>
                <span class="w-2 h-2 rounded-full bg-star"></span>
                <span class="w-2 h-2 rounded-full bg-star"></span>
            </div>
        </footer>
    </div>

    <!-- 功能按钮组：+-图标 -->
    <div class="fixed right-5 top-1/2 -translate-y-1/2 flex flex-col gap-4 z-50">
        <button id="font-enlarge" class="w-11 h-11 bg-white rounded-full shadow-md flex items-center justify-center text-autumn-800 text-xl font-bold btn-hover focus:outline-none focus:ring-2 focus:ring-autumn-300">
            +
        </button>
        <button id="font-shrink" class="w-11 h-11 bg-white rounded-full shadow-md flex items-center justify-center text-autumn-800 text-xl font-bold btn-hover focus:outline-none focus:ring-2 focus:ring-autumn-300">
            -
        </button>
        <button id="export-image" class="w-11 h-11 bg-white rounded-full shadow-md flex items-center justify-center text-autumn-800 text-xl btn-hover focus:outline-none focus:ring-2 focus:ring-autumn-300">
            ⬇
        </button>
    </div>

    <!-- 截图工具 -->
    <script src="../js/html2canvas.min.js"></script>
    <script>
        let baseFontSize = 16;
        const mainContent = document.querySelector('main');
        
        // 放大字体
        document.getElementById('font-enlarge').addEventListener('click', () => {
            if (baseFontSize < 24) {
                baseFontSize += 2;
                mainContent.style.fontSize = `${baseFontSize}px`;
            }
        });

        // 缩小字体
        document.getElementById('font-shrink').addEventListener('click', () => {
            if (baseFontSize > 14) {
                baseFontSize -= 2;
                mainContent.style.fontSize = `${baseFontSize}px`;
            }
        });

        // 导出长图
        document.getElementById('export-image').addEventListener('click', () => {
            const target = document.querySelector('.container');
            html2canvas(target, {
                useCORS: true,
                backgroundColor: null,
                scale: 2
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = `十月写给大地的信_${new Date().getMonth()+1}月${new Date().getDate()}日.png`;
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        });
    </script>
</body>
</html>
